<!--
 * @Description: 客户端应用弹出
 * @Author: chendingfengmail@163.com
 * @Date: 2023-03-02 17:09:12
 * @LastEditTime: 2023-03-02 17:09:12
 * @LastEditors: chendingfengmail@163.com
 * @Reference:
-->
<template>
    <el-dialog custom-class="clientAppHandle_dialog" :title="titleName" top="5vh" width="600px" center
        :visible.sync="visible" :before-close="modelClose" @open="modelOpen" :close-on-click-modal="false" append-to-body>
        <el-form :rules="clientAppHandleRules" ref="clientAppHandleForm" :model="clientAppModelData"
            :disabled="formDisabled" v-loading="loading">
            <!--
            <el-form-item label="所属客户" :label-width="formLabelWidth" prop="clientId" >
                <el-select :disabled="this.modelType=='parentAdd'" v-model="clientAppModelData.clientId" placeholder="请选择所属客户" style="width:100%;" prop="clientId">
                    <el-option v-for="item of clientList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            -->
            <el-form-item label="应用图标" :label-width="formLabelWidth" prop="icon">
                <el-input v-model="clientAppModelData.icon" maxlength="300" autocomplete="off"
                    placeholder="请输入应用名称"></el-input>
            </el-form-item>
            <el-form-item label="应用名称" :label-width="formLabelWidth" prop="name">
                <el-input v-model="clientAppModelData.name" maxlength="60" autocomplete="off"
                    placeholder="请输入应用名称"></el-input>
            </el-form-item>
            <el-form-item label="H5地址" :label-width="formLabelWidth" prop="h5">
                <el-input v-model="clientAppModelData.h5" maxlength="60" autocomplete="off"
                    placeholder="请输入跳转地址"></el-input>
            </el-form-item>
            <el-form-item label="访问前缀" :label-width="formLabelWidth" prop="prefix">
                <el-input v-model="clientAppModelData.prefix" maxlength="60" autocomplete="off"
                    placeholder="请输入访问前缀"></el-input>
            </el-form-item>
            <el-form-item label="接口地址" :label-width="formLabelWidth" prop="api">
                <el-input v-model="clientAppModelData.api" maxlength="60" autocomplete="off"
                    placeholder="请输入代理的接口地址"></el-input>
            </el-form-item>
            <el-form-item label="是否启用" :label-width="formLabelWidth" prop="enable">
                <el-switch v-model="clientAppModelData.enable" :active-value="1" :inactive-value="0" active-color="#13ce66">
                </el-switch>
            </el-form-item>
            <el-form-item label="去除前缀" :label-width="formLabelWidth" prop="enable">
                <el-switch v-model="clientAppModelData.trim" :active-value="1" :inactive-value="0" active-color="#13ce66">
                </el-switch>
            </el-form-item>
            <el-form-item label="应用描述" :label-width="formLabelWidth" prop="description">
                <el-input v-model="clientAppModelData.description" maxlength="60" autocomplete="off"
                    placeholder="请输入应用描述"></el-input>
            </el-form-item>
            <el-form-item label="备注信息" :label-width="formLabelWidth" prop="remark">
                <el-input type="textarea" maxlength="120" :rows="3" v-model="clientAppModelData.remark" autocomplete="off"
                    placeholder="请输入备注信息"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" v-show="btnVisible">
            <el-button type="primary" @click="formSubmit" :loading="loading">提 交</el-button>
        </div>
    </el-dialog>
</template>
  
<script>
import util from '@/libs/util';

export default {
    name: 'clientAppHandleDialog',
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        modelType: {
            type: String,
            required: true,
            default: () => {
                return 'info';
            },
        },
        modelData: {
            type: Object,
            default: () => {
                return {
                    id: '',
                    clientId: '',
                    name: '',
                    icon: '',
                    description: '',
                    prefix: '',
                    trim: 1,
                    h5: '',
                    api: '',
                    enable: 1,
                    remark: '',
                };
            },
        },
    },
    data() {
        return {
            titleName: '详情',
            formLabelWidth: '100px',
            dialogFormVisible: false,
            formDisabled: false,
            btnVisible: true,
            loading: false,
            clientAppHandleRules: {
                icon: this.$Validate.otherTxt(true, '请输入应用图标地址'),
                name: this.$Validate.otherTxt(true, '请输入应用名称'),
                prefix: this.$Validate.otherTxt(true, '请输入访问前缀'),
                h5: this.$Validate.otherTxt(true, '请输入H5跳转地址'),
                clientId: this.$Validate.otherTxt(true, '请选择客户端'),
                api: this.$Validate.otherTxt(true, '请输入接口api'),
            },
            clientList: [],

            // 客户应用数据
            clientAppModelData: {
                id: '',
                clientId: '',
                name: '',
                icon: '',
                description: '',
                prefix: '',
                trim: 1,
                h5: '',
                api: '',
                enable: 1,
                remark: '',
            }
        };
    },
    created() { },
    computed: {},
    mounted() { },
    methods: {
        // appid生成
        createAppId() {
            this.modelData.clientId = util.generateUUID();
        },


        // 对话框打开
        modelOpen() {
            this.loadClientDeatilsList();
            switch (this.modelType) {
                case 'parentAdd':
                    this.distModelData(true)
                    this.modelTypeChange('客户端应用添加', false, true);
                    break;
                case 'add':
                    this.distModelData()
                    this.modelTypeChange('客户端应用添加', false, true);
                    break;
                case 'info':
                    this.distModelData();
                    this.modelTypeChange('客户端应用详情', true, false);
                    break;
                case 'edit':
                    this.distModelData();
                    this.modelTypeChange('客户端应用编辑', false, true);
                    break;
                default:
                    break;
            }
        },

        distModelData(parentAdd) {
            if (parentAdd) {
                this.clientAppModelData = {
                    id: util.generateUUID(),
                    clientId: this.modelData.clientId,
                    name: '',
                    icon: '',
                    description: '',
                    prefix: '',
                    trim: 1,
                    h5: '',
                    api: '',
                    enable: 1,
                    remark: '',
                }
            }else {
                this.clientAppModelData = this.modelData
            }
        },

        // 模式切换
        modelTypeChange(titleName, formDisabled, btnVisible) {
            this.titleName = titleName;
            this.formDisabled = formDisabled;
            this.btnVisible = btnVisible;
        },

        // 表单提交
        formSubmit() {
            this.$refs.clientAppHandleForm.validate((valid) => {
                if (valid) {
                    switch (this.modelType) {
                        case 'parentAdd':
                            this.handleAdd(this.clientAppModelData);
                            break;
                        case 'add':
                            this.handleAdd(this.clientAppModelData);
                            break;
                        case 'edit':
                            this.handleEdit(this.clientAppModelData);
                            break;
                        default:
                            break;
                    }
                }
            });
        },

        // 加载第三方客户列表
        async loadClientDeatilsList() {
            let param = {
                pageIndex: 1,
                pageSize: 9999,
            };
            try {
                let result = await this.$api.clientDetails.findList(param);
                this.clientList = []
                for (const key in result.value) {
                    const element = result.value[key];
                    this.clientList.push(
                        {
                            label: element.manufacture,
                            value: element.id
                        }
                    )
                }
            } catch (error) {
                console.log(error);
            }
        },

        // 新增
        handleAdd(formData) {
            this.loading = true;
            this.$api.clientApp
                .add(formData)
                .then((res) => {
                    this.$message.success('添加成功');
                    this.loading = false;
                    this.modelClose();
                    this.$emit('loadList');
                })
                .catch((err) => {
                    console.log(err);
                    this.loading = false;
                });
        },
        // 编辑
        handleEdit(formData) {
            this.loading = true;
            this.$api.clientApp
                .update(formData)
                .then((res) => {
                    this.$message.success('更新成功');
                    this.loading = false;
                    this.modelClose();
                    this.$emit('loadList');
                })
                .catch((err) => {
                    console.log(err);
                    this.loading = false;
                });
        },
        // 重置表单
        resetForm() {
            this.$nextTick(() => {
                this.$refs.clientAppHandleForm.resetFields();
            });
        },
        // 对话框关闭
        modelClose() {
            this.resetForm();
            this.$emit('update:visible', false); // 直接修改父组件的属性
        },
    },
};
</script>
  
<style lang="scss">
.clientDetailsHandle_dialog {
    .el-dialog__body {
        max-height: 55vh !important;
    }

    //滚动条的宽度
    ::-webkit-scrollbar {
        display: block;
        width: 0.375rem;
        border-radius: 0.625rem;
    }

    //滚动条的滑块
    ::-webkit-scrollbar-thumb {
        border-radius: 0.625rem;
    }
}
</style>
  